<template>
  <div>
    <el-card class="_calendar">
      <el-container>

        <el-main width="55%">
          <el-card>
            <el-calendar v-model="valueDate" :first-day-of-week="7">
              <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
              <template slot="dateCell" slot-scope="{date, data}" style="height: 100px;">
                <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
                  <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(1).join('-') }}
                    <i :class="[data.isSelected ?'el-icon-check':'']" />
                    <br><br>
                    <span style="color: #f4516c;font-size: 12px;margin-left: 15px;">{{ dealMyDate(data.day) }}</span>
                  </p>
                </div>
              </template>
            </el-calendar>
          </el-card>
        </el-main>

        <el-aside width="45%" style="overflow: hidden;">
          <el-card>
            <div class="el-calendar__header">
              <div class="el-calendar__title">订单列表</div>
            </div>
            <div class="calendar-info">
              <el-table
                ref="table"
                v-loading="crud.loading"
                :data="crud.data"
                size="small"
                style="width: 100%;"
                @selection-change="crud.selectionChangeHandler"
              >
                <el-table-column align="left" prop="qymc" label="机构名称" />
                <el-table-column align="center" prop="cnt" label="订单数量" />
              </el-table>
              <!--分页组件-->
              <pagination />
            </div>
          </el-card>
        </el-aside>
      </el-container>
    </el-card>
  </div>

</template>
<script>
import crudFymx from '@/api/business/fymx'
import { queryAllHljgYmk } from '@/api/business/ymkdz'
import { groupByHlry2Count } from '@/api/business/order'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import moment from 'moment'

const defaultForm = { bisFymxId: null, bisFymxJzdjId: null, bisFymxJzdjLsh: null, bisFymxYbkh: null, bisFymxYjlx: null, bisFymxYyypbm: null, bisFymxCfh: null, bisFymxKfrq: null, bisFymxYbypbm: null, bisFymxMc: null, bisFymxDj: null, bisFymxSl: null, bisFymxZj: null, bisFymxJx: null, bisFymxJl: null, bisFymxSypc: null, bisFymxYf: null, bisFymxZxks: null, bisFymxZxts: null, bisFymxYbsflb: null, bisFymxSpr: null, bisFymxZdxmjkm: null, bisFymxYsxm: null, bisFymxJbr: null, bisFymxYysflb: null, bisFymxDw: null, bisFymxGg: null, bisFymxCfybz: null, bisFymxBzsl: null, bisFymxYl: null, bisFymxYpdzjgm: null, ywlx: null, lrr: null, lrrxm: null, lrbm: null, lrbmmc: null, lrsj: null, gxr: null, gxrxm: null, gxbm: null, gxbmmc: null, gxsj: null, sfyx: null, bz: null, bisFymxGrbh: null }
export default {
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '记账', url: 'api/order/orderCntList', sort: '', crudMethod: { ...crudFymx }})
  },
  data: function() {
    return {
      valueDate: new Date(),
      allHljgYmk: [],
      jzid: '',
      zxks: '',
      ysxm: '',
      grbh: '',
      ybkh: '',
      jzlsh: '',
      todayAnonymous: '',
      permission: {
        add: ['admin', 'fymx:add'],
        edit: ['admin', 'fymx:edit'],
        del: ['admin', 'fymx:del']
      },
      rules: {
      },
      isArrange: [
        '2020-06-08',
        '2020-06-09',
        '2020-06-10',
        '2020-06-11',
        '2020-06-17',
        '2020-06-18'
      ],
      resDate: [
        { 'date': '2022-08-20', 'content': '67.9元' },
        { 'date': '2022-08-26', 'content': '88.3元' },
        { 'date': '2022-08-23', 'content': '160元' }
      ]
    }
  },
  created: function() {
  },
  mounted: function() {
    this.initCalendar()
    this.groupByHlry2Count()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.queryAllHljgYmk()
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToAdd](crud, form) {
      this.queryAllHljgYmk()
    },
    // 点击日期块
    calendarOnClick(e) {
      const selectedDate = moment(e.day).format('YYYY-MM-DD')
      this.query.bisOrderHlrq = selectedDate
      this.crud.toQuery()
      this.$notify.info({
        title: '选择日期为',
        message: e.day,
        position: 'top-left'
      })
    },
    // 点击信息块
    infoOnClick() {
      console.log(123)
    },
    // 新增排班
    saveOnClick() {
      console.log(234)
    },
    // 删除排班
    infoDel() {
      this.$confirm('此操作将永久删除该排班, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取所有机构服务项目
    queryAllHljgYmk() {
      queryAllHljgYmk().then(res => {
        this.allHljgYmk = res
      }).catch(() => { })
    },
    // 获取选中的对象
    seletChange(val) {
      // 选中的数据和options进行匹配
      var obj = {}
      obj = this.allHljgYmk.find(function(i) {
        return i.bisYmkdzYbmc === val
      })
      const that = this
      // 在change中获取到整条对象数据
      console.log(obj)
      this.form.bisFymxDj = obj.bisYmkdzDj
      this.form.bisFymxYyypbm = obj.bisYmkdzYbbm
      this.form.bisFymxYbypbm = obj.bisYmkdzYbbm
      this.form.bisFymxJx = obj.bisYmkdzJx
      this.form.bisFymxJl = obj.bisYmkdzJl
      this.form.bisFymxSypc = obj.bisYmkdzSypc
      this.form.bisFymxYf = obj.bisYmkdzYf
      this.form.bisFymxYl = obj.bisYmkdzYl
      this.form.bisFymxZxts = obj.bisYmkdzZxts
      this.form.bisFymxDw = obj.bisYmkdzDw
      this.form.bisFymxGg = obj.bisYmkdzGg
      this.form.bisFymxYbsflb = obj.bisYmkdzGg
      this.form.bisFymxYysflb = obj.bisYmkdzGg

      const date = moment(that.valueDate).format('YYYYMMDD')

      this.form.bisFymxKfrq = date
      this.form.bisFymxZxks = that.zxks
      this.form.bisFymxJzdjId = that.jzid
      this.form.bisFymxJzdjLsh = that.jzlsh
      this.form.bisFymxYbkh = that.ybkh
      this.form.bisFymxGrbh = that.grbh
      this.form.bisFymxYsxm = that.ysxm
      this.form.bisFymxJbr = that.ysxm
      this.form.bisFymxSpr = that.ysxm
      // this.form.bisFymxKfrq = obj.bisYmkdzYbbm
    },
    initCalendar() {
      this.$nextTick(() => {
        const that = this
        // 点击前一个月
        const prevBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(1)'
        )
        prevBtn.addEventListener('click', e => {
          const viewdate = moment(this.valueDate).format('YYYY-MM-DD')
          that.groupByHlry2Count()
        })

        // 点击下一个月
        const nextBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(3)'
        )
        nextBtn.addEventListener('click', () => {
          const viewdate = moment(this.valueDate).format('YYYY-MM-DD')
          that.groupByHlry2Count()
        })

        // 点击今天
        const todayBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(2)'
        )
        todayBtn.addEventListener('click', function foonumber() {
        //  that.todayAnonymous = arguments.callee
          const viewdate = moment(this.valueDate).format('YYYY-MM-DD')
          that.groupByHlry2Count()
        })
      })
    },

    dealMyDate(v) {
      const len = this.resDate.length
      let res = ''
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].hlrq === v) {
          res = '订单数：' + this.resDate[i].content
          break
        }
      }
      return res
    },
    // 获取所有机构服务项目
    groupByHlry2Count() {
      groupByHlry2Count(moment(this.valueDate).format('YYYY-MM-DD')).then(res => {
        console.log(res)
        this.resDate = res
      }).catch(() => { })
    }
  }
}
</script>
<style scoped>

.is-selected {
  color: #1989fa;
}
.p-popover {
  text-align: center;
}
._calendar {
  height: 99.5%;
  width: 100%;
}
.el-main {
  padding: 0px;
  overflow: hidden;
}
.calendar-info {
  height: 94%;
}
.el-alert {
  margin: 15px 0px;
}
.el-alert:hover {
  transform: scale(1.02);
}
.el-alert:active {
  transform: scale(1.01);
}
</style>
<style >
._calendar .div-Calendar {
  height: 80px;
  box-sizing: border-box;
  padding: 8px;
}
._calendar .el-calendar-table .el-calendar-day {
  padding: 0px;
  height: 100%;
}
._calendar .el-container,
._calendar .el-calendar {
  height: 100%;
}
._calendar .el-card__body {
  padding: 0px;
}
</style>
<style>
</style>
